<template>
	<el-container>
		<el-header>
			<el-link :underline="false">博客后台系统</el-link>
			<el-dropdown @command="myselfEvent">
				<span class="el-dropdown-link">
					<el-avatar icon="el-icon-user-solid" :src="userinfo.userpic"></el-avatar>
				</span>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item icon="el-icon-user-solid" command="个人中心">个人中心</el-dropdown-item>
					<el-dropdown-item icon="el-icon-switch-button" command="退出">退出</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>

		</el-header>
		<el-container>
			<el-aside width="200px">
				<el-menu :default-active="routeractive" class="el-menu-vertical-demo" :router='true'>
					<el-menu-item index="/odometer" v-if="userinfo.role == '0'">
						<i class="el-icon-odometer"></i>
						<span slot="title">仪表盘</span>
					</el-menu-item>
					<el-menu-item index="/userManage" v-if="userinfo.role == '0'">
						<i class="el-icon-place"></i>
						<span slot="title">用户管理</span>
					</el-menu-item>
					<el-menu-item index="/articleManage">
						<i class="el-icon-notebook-2"></i>
						<span slot="title">文章管理</span>
					</el-menu-item>
					<el-menu-item index="/classifyManage">
						<i class="el-icon-menu"></i>
						<span slot="title">分类管理</span>
					</el-menu-item>
					<el-menu-item index="/projectManage">
						<i class="el-icon-document"></i>
						<span slot="title">项目管理</span>
					</el-menu-item>
					<el-menu-item index="/discussManage">
						<i class="el-icon-chat-round"></i>
						<span slot="title">评论管理</span>
					</el-menu-item>
				</el-menu>
			</el-aside>
			<el-container>
				<el-main>
					<router-view></router-view>
				</el-main>
				<el-footer>
					copyright © 2022 李郅 .All rights reserved.
				</el-footer>
			</el-container>
		</el-container>

		<el-dialog title="基本信息" :visible.sync="dialogVisible" width="50%" :close-on-click-modal="false">
			<el-form ref="form" :model="userinfoseself" label-width="80px">
				<el-form-item label="名称">
					<el-input v-model="userinfoseself.username"></el-input>
				</el-form-item>
				<el-form-item label="头像">
					<el-upload class="avatar-uploader" action="/blog/users/addUpload" :show-file-list="false"
						:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
						<el-avatar icon="el-icon-user-solid" v-if="userinfoseself.userpic"
							:src="userinfoseself.userpic">
						</el-avatar>
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
				<el-form-item label="邮箱">
					<el-input v-model="userinfoseself.email"></el-input>
				</el-form-item>
				<el-form-item label="密码">
					<el-input type="password" v-model="userinfoseself.password"></el-input>
				</el-form-item>
				<el-form-item label="状态">
					<el-switch v-model="userinfoseself.status" :active-value="0" :inactive-value="1"></el-switch>
				</el-form-item>
				<el-form-item label="角色">
					<el-switch v-model="userinfoseself.role" :active-value="0" :inactive-value="1"></el-switch>
				</el-form-item>
				<el-form-item label="关于">
					<el-input type="textarea" v-model="userinfoseself.about"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="selfEdit">确定</el-button>
					<el-button @click="dialogVisible = false">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</el-container>

</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		name: "page",
		data() {
			return {
				dialogVisible: false,
				userinfoseself: {

				}
			}
		},
		computed: {
			...mapState(['routeractive', 'userinfo'])
		},
		created() {
			let _obj = JSON.stringify(this.userinfo);
			this.userinfoseself = JSON.parse(_obj);
		},
		methods: {
			myselfEvent(command) {
				if (command == "个人中心") {
					this.dialogVisible = true;
				} else if (command == '退出') {
					this.open();
				}
			},

			open() {
				this.$confirm('此操作将退出当前账号, 是否继续?', '提示', {
					confirmButtonText: '继续',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					localStorage.removeItem("userinfo");
					this.$router.push("/sign");
					this.$message({
						type: 'success',
						message: '退出成功!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消退出'
					});
				});
			},
			handleAvatarSuccess(res, file) {
				this.userinfoseself.userpic = res.data;
			},
			beforeAvatarUpload(file) {
				console.log(file);
				const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 < 2;

				if (!isJPG) {
					this.$message.error('上传头像图片只能是 JPG 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			},
			async selfEdit() {
				let {
					data
				} = await this.$axios.post('/blog/users/addoredituser', this.userinfoseself);
				this.$message({
					type: 'success',
					message: '修改成功!'
				});
				this.dialogVisible = false;
				localStorage.removeItem("userinfo");
				this.$router.push("/sign");
			}
		},
	}
</script>

<style lang="less" scoped>
	.el-container {
		height: 100%;

		.el-menu {
			background-color: transparent !important;
		}
	}

	.el-dropdown {
		float: right;
		margin-top: 10px;
	}

	.el-dropdown-menu {
		top: 47px !important;
	}

	.el-header,
	.el-footer {
		background-color: #B3C0D1;
		color: #333;
		text-align: center;
		line-height: 60px;
	}

	.el-aside {
		background-color: #D3DCE6;
		color: #333;
		text-align: center;
		line-height: 200px;
	}

	.el-main {
		background-color: #E9EEF3;
		color: #333;
		text-align: center;
		line-height: 160px;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>
